<template>
  <div class="relative">
    <div
      class="absolute top-0 left-0 z-30 inline-block"
      v-if="compInfo.showToolBtn"
      :title="`${compInfo.text}: ${compInfo.id}`"
    >
      <a-radio-group size="small" @change="onChange">
        <a-radio-button value="setting"><SettingOutlined /></a-radio-button>
        <a-radio-button value="close"><EyeInvisibleOutlined /></a-radio-button>
        <a-radio-button value="move" class="cursor-move"><DragOutlined /></a-radio-button>
      </a-radio-group>
    </div>
  </div>
  <slot></slot>
</template>

<script setup lang="ts">
import { SettingOutlined, EyeInvisibleOutlined, DragOutlined } from '@ant-design/icons-vue'

import { useDesignerStore } from '@/stores/designerStore'
const designerStore = useDesignerStore()
const { toggleToolBtn } = designerStore
const compInfo = defineModel<DesignComp>({
  required: true
})
function onChange(e: any) {
  if ('close' === e.target.value) {
    toggleToolBtn(false, compInfo.value.id)
  }
}
</script>

<style scoped></style>
